<template>
  <div>
    <Box>
      <div slot="box">
        <div>
          <a-form-model ref="ruleForm" layout="inline" :model="params">
            <a-form-model-item label="机构名称" prop="mechanismName">
              <a-input v-model="params.mechanismName	" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="机构类型" prop="mechanismType" style="width: 270px">
              <a-select v-model="params.mechanismType" style="width: 200px" placeholder="请选择">
                <a-select-option v-for="item of this.filterMultiDictText1('mechanism_type','')" :value="item.value" :key="item">
                  {{ item.text }}
                </a-select-option>
              </a-select>
              <!--              <a-input v-model="data.name" placeholder="input placeholder" />-->
            </a-form-model-item>
            <a-form-model-item label="机构层级" prop="mechanismRank" style="width: 270px">
              <a-select v-model="params.mechanismRank" style="width: 200px" placeholder="请选择">
                <a-select-option v-for="item of this.filterMultiDictText1('level','')" :value="item.value" :key="item">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item >
              <a-button type="primary" @click="query">
                查询
              </a-button>
              <a-button style="margin-left: 10px;" @click="resetForm">
                重置
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <div style="padding: 0 0 15px 0;width: 100%">
          <a-button @click="getexcel" style="margin-right: 20px">
            <a-icon type="upload" />导出
          </a-button>
<!--          <a-button @click="showModal" >-->
<!--            <a-icon type="import" />导入-->
<!--          </a-button>-->
        </div>
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="list"
          :showSelection="true"
          :showPagination="true"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="state" slot-scope="text, record">
            <a style="padding: 0 5px" @click="skip(record)">查看</a>
          </template>
        </CustomTable>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <Input ref="input" @warn="warn"></Input>
      </a-modal>
      <a-modal v-model="visible1" title="详细信息" @ok="handleOk1" width="600px" centered>
        <!--        <Input ref="input"></Input>-->
        <div v-for="item of this.warns">
          <div style="color: red;font-size: 15px">{{ item }}</div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { institution, getexcel } from '@/api/xlgc/ComprehensiveBusiness'
import { filterDictTextByCache, getDictItems } from '@/components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '@api/api'
import Input from '@/views/xlgc/ComprehensiveBusiness/institution/ImportModal'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  name: 'Index',
  components: { Box, Input, CustomTable },
  data() {
    return {
      selectedRowKeys: [],
      data: {
        name: '',
        state: '',
        occurrenceDate: ''
      },
      rules: {
        mechanismName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
        mechanismType: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        mechanismRank: [{ required: true, message: 'Please pick a date', trigger: 'change' }]
      },
      detailed: {},
      ModalText: 'Content of the modal',
      visible: false,
      visible1: false,
      confirmLoading: false,
      size: 'large',
      loading: false,
      input: {
        input1: ''
      },
      params: {
        mechanismName: '',
        mechanismRank: undefined,
        mechanismType: undefined
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.index - 1) * this.pageFilter.size + (index + 1)}` // 序号分页后连续
        },
        {
          title: '机构名称',
          dataIndex: 'mechanismName',
          scopedSlots: { customRender: 'mechanismName' }
        },
        {
          title: '机构类型',
          dataIndex: 'mechanismType',
          scopedSlots: { customRender: 'mechanismType' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('mechanism_type', text)
          }
        },
        {
          title: '机构层级',
          dataIndex: 'level_dictText',
          scopedSlots: { customRender: 'level_dictText' },
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('level', text)
          }
        },
        {
          title: '操作',
          width: 90,
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        }
      ],

      list: [],
      pageFilter: {
        index: 1,
        size: 10
      },
      warns: []
    }
  },
  mounted() {
    this.institution(this.pageFilter)
  },
  methods: {
    warn(val) {
      console.log(val)
      this.warns = val.result
      if (!val.success) {
        console.log(this.warns)
        this.visible1 = true
      }
    },
    onSelectChange(selectedRowKeys, item) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, item)
      this.selectedRowKeys = selectedRowKeys
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.institution(this.pageFilter)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'index' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.institution(this.pageFilter)
    },
    chongzhi() {
      this.params.mechanismName = ''
      this.params.mechanismRank = ''
      this.params.mechanismType = ''

      this.institution(this.params)
    },
    handleOk1() {
      this.visible1 = false
    },
    handleOk(e) {
      console.log(e)
      this.$refs.input.handleOk()
      // this.visible = false;
    },
    showModal(val) {
      this.visible = true
    },
    skip(val) {
      console.log(val)
      this.$router.push({
        path: '/institution/AgencyDetails',
        query: {
          name: val.mechanismName,
          type: val.mechanismType,
          level: val.level
        }
      })
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) // res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    },
    getexcel() {
        getexcel({
          ids: this.selectedRowKeys,
          name:this.params.mechanismName,
          level:this.params.mechanismRank,
          type:this.params.mechanismType
        }).then(response => {
          console.log(response)
          const fileName = '综治机构数据.xlsx'
          this.downLoadMix(response, fileName)
        }).catch(error => {
          console.log(error)
        })
    },
    query() {
      console.log(Object.assign({}, this.pageFilter, this.params))
      this.institution(Object.assign({}, this.pageFilter, this.params))
    },
    institution(val) {
      let lists = []
      return new Promise((resolve, reject) => {
        this.loading = true
        institution(val).then(response => {
          if (response.result.records.length != 0) {
            this.list = response.result
            this.loading = false
            resolve(response)
            this.loading = false
          } else {
            this.list = response.result.records
            this.loading = false
          }

          console.log(response)
        }).catch(error => {
          this.visible = false
          reject(error)
        })
      })
    },
    handleChange1(val) {
      this.params.mechanismType = val
      return val
    },
    handleChange2(val) {
      // console.log(val)
      this.params.mechanismRank = val
      return val
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    filterMultiDictText1(dictCode, text) {
      // console.log(dictCode,text)
      // if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // console.log(this.$filterDictText(datas, text))
      // return this.$filterMultiDictText(datas, text)
      // return this.$filterDictText(datas, text)
      console.log(datas)
      return datas
    }
  }
}
</script>

<style scoped>

</style>
